
// 瀑布流
var waterfallsFlow = {
    template: `<div class="waterfallsFlow clear">
                <ul class="flow-left" id="flowLeft">
                   <li v-for="(item,index) in itemsA" :key="index" @click="flowDetails">
                      <div class="flowImg">
                          <img :src="item.src">
                       </div>
                       <p class="flowText">{{item.flowText}}</p>
                       <div class="userInfo">
                         <div class="userImg">
                            <img :src="item.userImg" alt="">
                         </div>
                         <div @click="awesome(item)">
                             <img class="zan" src="./images/zan.png" alt="">
                             <span>{{item.zan}}</span>
                         </div>
                      </div>
                   </li>
                </ul>
                <ul class="flow-right" id="flowRight">
                   <li  v-for="(item,index) in itemsB" :key="index" @click="flowDetails">
                      <div class="flowImg">
                          <img :src="item.src">
                       </div>
                       <p class="flowText">{{item.flowText}}</p>
                       <div class="userInfo">
                         <div class="userImg">
                            <img :src="item.userImg" alt="">
                         </div>
                         <div @click="awesome(item)">
                             <img class="zan" src="./images/zan.png" alt="">
                             <span>{{item.zan}}</span>
                         </div>
                      </div>
                   </li>
                </ul>
              </div>`,
    data() {
        return {
            waterfallsFlow: [
                {
                    src: "./images/flow1.png",
                    flowText: "梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼",
                    userImg: "./images/userImg.png",
                    usernmae: "懒猫",
                    isawesome: false,
                    zan: 0,
                },
                {
                    src: "./images/flow2.png",
                    flowText: "梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼",
                    userImg: "./images/userImg.png",
                    usernmae: "懒猫",
                    isawesome: false,
                    zan: 0,
                },
                {
                    src: "./images/flow3.png",
                    flowText: "梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼",
                    userImg: "./images/userImg.png",
                    usernmae: "懒猫",
                    isawesome: false,
                    zan: 0,
                },
                {
                    src: "./images/flow4.png",
                    flowText: "梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼",
                    userImg: "./images/userImg.png",
                    usernmae: "懒猫",
                    isawesome: false,
                    zan: 0,
                }, {
                    src: "./images/flow2.png",
                    flowText: "梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼",
                    userImg: "./images/userImg.png",
                    usernmae: "懒猫",
                    isawesome: false,
                    zan: 0,
                },
                {
                    src: "./images/flow3.png",
                    flowText: "梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼",
                    userImg: "./images/userImg.png",
                    usernmae: "懒猫",
                    isawesome: false,
                    zan: 0,
                },
                {
                    src: "./images/flow4.png",
                    flowText: "梦幻巴黎婚礼梦幻巴黎婚礼梦幻巴黎婚礼",
                    userImg: "./images/userImg.png",
                    usernmae: "懒猫",
                    isawesome: false,
                    zan: 0,
                }

            ],
            itemsB: [],
            itemsA: [],
        }
    },
    mounted: function () {
        this.getData()
    },

    methods: {
        getImg: function (url, callback) {
            var img = new Image();
            img.src = url;
            if (img.compltet) {
                callback(img.width, img.height, Number(img.height) / Number(img.width));
            } else {
                img.onload = function () {
                    callback(img.width, img.height, Number(img.height) / Number(img.width));
                }
            }
        },
        //瀑布流展示
        getData() {
            let boxA = document.getElementsByClassName('flow-left')[0].clientHeight;
            let boxB = document.getElementsByClassName('flow-right')[0].clientHeight;
            var list = this.waterfallsFlow;
            var that = this;
            for (var i = 0, len = list.length; i < len; i++) {
                (function (j) {
                    that.getImg(list[j].src, function (w, h, r) {
                        boxA = document.getElementsByClassName('flow-left')[0].clientHeight;
                        boxB = document.getElementsByClassName('flow-right')[0].clientHeight;
                        if (boxA > boxB) {
                            that.itemsB.push(list[j])
                        } else {
                            that.itemsA.push(list[j])
                        }
                    })
                })(i)
            }
        },
        //点赞
        awesome(item) {
            if (!item.isawesome) {
                item.isawesome = !item.isawesome
                item.zan++
            } else {
                item.isawesome = !item.isawesome
                item.zan--
            }
        },
        flowDetails:function () {
            this.$router.push("/details")
        }
    }

}
